<template>
	<view class="content">
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item, index) in addressList" :right-options="options" :key="index" @click="swipeClick($event, item)">
				<view  aria-role="tab" class="solid-bottom padding flex align-center response">
					<view class="flex-sub">
						<view class="text-lg padding-xs">
							<text class="text-black text-bold">{{item.name}}</text>
							<text class="text-black text-bold fr">{{item.phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")}}</text>
							<text v-if="item.deftIs && item.deftIs == '1'" class="cu-tag bg-red bottom-s">默认</text>
						</view>
						<view class="text-gray">
							<text>{{item.addrArea}}  {{item.addr}}</text>
						</view>
					</view>
				</view> 
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view  aria-role="tab" v-if="addressList.length == 0">
			<no-data :src="img_src + 'zw1.png'">
				<view bindtap='a' class="text-gray">暂无收货地址信息</view>
				<view>赶紧添加一个吧</view>
			</no-data>
		</view>
		<button class="add-btn bg-blue" @click="addAddress('add')">新增地址</button>
	</view>
</template>
<script>
	import noData from '@/components/nodata/no-data.vue'
	import uniSwipeAction from '@/components/swiper/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/swiper/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		data() {
			return {
				img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
				addressList: [],
				options: [
					{
						text: '修改',
						style: {backgroundColor: 'rgb(0, 170, 0)'}
					},
					{
						text: '删除',
						style: {backgroundColor: 'rgb(255,58,49)'}
					},
				]
			}
		},
		onLoad(option) {
			this.refreshList()
		},
		methods: {
			addAddress(type, item) {
				uni.navigateTo({
					url: `/pages_mine/users/uaddr-edit?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//添加或修改成功之后回调
			refreshList() {
				const that = this
				uni.showLoading({title:"加载中"});
				that.$request.getForm('/view/uacid/addr-list', {pageno:'1'}).then(res => {
					uni.hideLoading();
					that.addressList = res.data;
				})
			},
			
			swipeClick(e,item) {
				let { content } = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								this.$request.getForm('/view/uacid/addr-drop', {id:item.id}).then(res => {
									if(res.meta.success) {
										this.$utils.msg('删除成功');
									}
									this.refreshList();
								})
							} 
						}
					});
				} else if(content.text === '修改') {
					this.addAddress('edit',item);
				}
			}
		},
		components:{
			"no-data":noData,
			"uni-swipe-action":uniSwipeAction,
			"uni-swipe-action-item":uniSwipeActionItem
		},
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 120upx;
		background: #fff;
	}
	.bottom-s {
		margin-left: 19rpx;
		bottom: 4rpx;
		border-radius: 38rpx;
	}
	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px;
	}
</style>
